// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';
import {useIntl} from 'react-intl';

export function UserGroupsSVG(props: React.HTMLAttributes<HTMLSpanElement>) {
    const {formatMessage} = useIntl();
    return (
        <span {...props}>
            <svg
                width='160'
                height='99'
                viewBox='0 0 160 99'
                fill='none'
                role='img'
                aria-label={formatMessage({id: 'generic_icons.user_groups', defaultMessage: 'User Groups Icon'})}
            >
                <g clipPath='url(#clip0_4220_135496)'>
                    <path
                        d='M155.129 33.2068C155.129 49.338 141.997 62.4137 125.798 62.4137C116.614 62.4137 108.414 58.2106 103.037 51.6292C98.9293 46.6029 96.4679 40.1917 96.4679 33.2068C96.4679 17.0757 109.6 4 125.798 4C141.997 4 155.129 17.0757 155.129 33.2068Z'
                        fill='var(--center-channel-bg)'
                    />
                    <path
                        d='M155.129 33.2068C155.129 49.338 141.997 62.4137 125.798 62.4137C116.614 62.4137 108.414 58.2106 103.037 51.6292C98.9293 46.6029 96.4679 40.1917 96.4679 33.2068C96.4679 17.0757 109.6 4 125.798 4C141.997 4 155.129 17.0757 155.129 33.2068Z'
                        fill='var(--center-channel-color)'
                        fillOpacity='0.12'
                    />
                    <mask
                        id='mask0_4220_135496'
                        mask-type='luminance'
                        maskUnits='userSpaceOnUse'
                        x='96'
                        y='4'
                        width='60'
                        height='59'
                    >
                        <path
                            d='M155.129 33.2068C155.129 49.338 141.997 62.4137 125.798 62.4137C116.614 62.4137 108.414 58.2106 103.037 51.6292C98.9293 46.6029 96.4679 40.1917 96.4679 33.2068C96.4679 17.0757 109.6 4 125.798 4C141.997 4 155.129 17.0757 155.129 33.2068Z'
                            fill='white'
                        />
                    </mask>
                    <g mask='url(#mask0_4220_135496)'>
                        <path
                            d='M141.063 51.3515L139.916 28.4265C139.429 18.6883 133.256 11.1166 125.804 11.1166C118.351 11.1166 112.178 18.6883 111.691 28.4265L110.544 51.3515H141.063Z'
                            fill='#090A0B'
                        />
                        <path
                            d='M147.922 52.088C146.836 48.329 143.796 45.4538 139.983 44.5751L131.917 42.7173H119.689L111.623 44.5751C107.808 45.4538 104.77 48.329 103.684 52.088L100.606 68.3442H151L147.922 52.088Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            opacity='0.24'
                            d='M147.922 52.088C146.836 48.329 143.796 45.4538 139.983 44.5751L131.917 42.7173H119.689L111.623 44.5751C107.808 45.4538 104.77 48.329 103.684 52.088L100.606 68.3442H151L147.922 52.088Z'
                            fill='var(--button-bg)'
                        />
                        <path
                            d='M131.1 43.0557L129.446 37.3966H122.186L120.843 43.0557C123.773 44.6276 128.169 44.6276 131.1 43.0557Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M131.1 43.0557L129.446 37.3966H122.186L120.843 43.0557C123.773 44.6276 128.169 44.6276 131.1 43.0557Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M136.181 25.7253C137.199 25.4367 137.245 27.0273 136.86 28.6774C136.507 30.1811 136.181 32.6383 135.122 32.0418C133.846 35.5824 131.518 38.2746 128.703 39.3405C127.829 39.7414 126.9 39.9608 125.937 39.9608C124.697 39.9608 123.514 39.5972 122.431 38.9506C120 37.6932 118.01 35.1897 116.871 32.0037C115.825 32.2782 115.382 29.6808 115.146 28.6774C114.848 27.4027 114.468 25.7252 115.825 25.7252C115.853 18.0023 120.399 11.7537 126.003 11.7537C131.607 11.7537 136.153 18.0024 136.181 25.7253Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M136.181 25.7253C137.199 25.4367 137.245 27.0273 136.86 28.6774C136.507 30.1811 136.181 32.6383 135.122 32.0418C133.846 35.5824 131.518 38.2746 128.703 39.3405C127.829 39.7414 126.9 39.9608 125.937 39.9608C124.697 39.9608 123.514 39.5972 122.431 38.9506C120 37.6932 118.01 35.1897 116.871 32.0037C115.825 32.2782 115.382 29.6808 115.146 28.6774C114.848 27.4027 114.468 25.7252 115.825 25.7252C115.853 18.0023 120.399 11.7537 126.003 11.7537C131.607 11.7537 136.153 18.0024 136.181 25.7253Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M137.01 25.7675C136.995 25.8843 136.917 25.9877 136.799 26.0461C136.681 26.1045 136.538 26.1111 136.414 26.0628C133.292 24.8733 130.265 21.6652 129.308 18.6539C126.279 21.7953 121.281 25.4689 116.3 26.2763C116.273 26.2813 116.248 26.283 116.22 26.283L116.222 26.2847C116.133 26.2847 116.044 26.2596 115.971 26.2146C115.876 26.1545 115.814 26.0628 115.798 25.9627C115.297 22.3664 116.353 15.5624 119.561 13.4632C121.682 12.0748 123.315 11.1522 125.971 11.3263C128.67 11.5032 131.603 12.9654 133.693 14.4465C136.792 16.6432 137.446 22.2593 137.01 25.7675Z'
                            fill='#090A0B'
                        />
                    </g>
                    <path
                        d='M62.7768 32.2645C62.7768 48.4275 49.6184 61.5289 33.3884 61.5289C24.1855 61.5289 15.9699 57.3175 10.5822 50.7231C6.4663 45.6869 4 39.2631 4 32.2645C4 16.1015 17.1583 3 33.3884 3C49.6184 3 62.7768 16.1015 62.7768 32.2645Z'
                        fill='var(--center-channel-bg)'
                    />
                    <path
                        d='M62.7768 32.2645C62.7768 48.4275 49.6184 61.5289 33.3884 61.5289C24.1855 61.5289 15.9699 57.3175 10.5822 50.7231C6.4663 45.6869 4 39.2631 4 32.2645C4 16.1015 17.1583 3 33.3884 3C49.6184 3 62.7768 16.1015 62.7768 32.2645Z'
                        fill='var(--center-channel-color)'
                        fillOpacity='0.12'
                    />
                    <mask
                        id='mask1_4220_135496'
                        mask-type='luminance'
                        maskUnits='userSpaceOnUse'
                        x='4'
                        y='3'
                        width='59'
                        height='59'
                    >
                        <path
                            d='M62.7768 32.2645C62.7768 48.4275 49.6184 61.5289 33.3884 61.5289C24.1855 61.5289 15.9699 57.3175 10.5822 50.7231C6.4663 45.6869 4 39.2631 4 32.2645C4 16.1015 17.1583 3 33.3884 3C49.6184 3 62.7768 16.1015 62.7768 32.2645Z'
                            fill='white'
                        />
                    </mask>
                    <g mask='url(#mask1_4220_135496)'>
                        <path
                            d='M59.315 56.2833C58.0392 52.1578 54.4779 49.0025 50.0085 48.0379L40.5537 46H26.2191L16.7642 48.0379C12.2928 49.0025 8.73148 52.1578 7.4577 56.2833L3.84967 74.1244H62.923L59.315 56.2833Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            opacity='0.24'
                            d='M59.316 56.2833C58.0402 52.1578 54.4789 49.0025 50.0095 48.0379L40.5546 46H26.22L16.7652 48.0379C12.2938 49.0025 8.73246 52.1578 7.45868 56.2833L3.85065 74.1244H62.924L59.316 56.2833Z'
                            fill='var(--button-bg)'
                        />
                        <path
                            d='M39.1307 46.7931L37.1957 41H28.7017L27.1307 46.7931C30.5593 48.4023 35.7022 48.4023 39.1307 46.7931Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M39.1307 46.7931L37.1957 41H28.7017L27.1307 46.7931C30.5593 48.4023 35.7022 48.4023 39.1307 46.7931Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M44.1566 29.3643C45.2559 29.0676 45.306 30.7029 44.8895 32.3994C44.5088 33.9454 44.1566 36.4716 43.0128 35.8584C41.6345 39.4985 39.1209 42.2663 36.0807 43.3622C35.1366 43.7744 34.1334 44 33.0934 44C31.7545 44 30.4765 43.6261 29.3073 42.9613C26.682 41.6686 24.5333 39.0947 23.3026 35.8192C22.1735 36.1014 21.6947 33.431 21.4406 32.3994C21.1179 31.0889 20.7078 29.3642 22.1735 29.3642C22.2037 21.4243 27.1132 15 33.1651 15C39.2169 15 44.1265 21.4243 44.1566 29.3643Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M44.1566 29.3643C45.2559 29.0676 45.306 30.7029 44.8895 32.3994C44.5088 33.9454 44.1566 36.4716 43.0128 35.8584C41.6345 39.4985 39.1209 42.2663 36.0807 43.3622C35.1366 43.7744 34.1334 44 33.0934 44C31.7545 44 30.4765 43.6261 29.3073 42.9613C26.682 41.6686 24.5333 39.0947 23.3026 35.8192C22.1735 36.1014 21.6947 33.431 21.4406 32.3994C21.1179 31.0889 20.7078 29.3642 22.1735 29.3642C22.2037 21.4243 27.1132 15 33.1651 15C39.2169 15 44.1265 21.4243 44.1566 29.3643Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M21.1539 13.5734C18.3395 17.0127 18.2803 22.6279 20.9939 27.6575C21.921 28.7724 22.846 29.8851 23.7732 31C23.7447 22.8734 25.0621 20.6841 26.3421 20.2854C28.4529 19.6232 30.9539 23.6775 35.5328 23.5762C36.2298 23.5604 37.7927 23.5041 38.7483 22.4094C39.5725 21.4657 39.4476 20.308 39.6953 20.2832C40.1051 20.2426 40.8438 22.4545 42.2642 30.9978C43.1782 29.8761 44.0944 28.7521 45.0084 27.6304C45.5082 25.6799 45.9685 23.1212 45.9992 20.1075C46.0408 16.033 44.0442 13.4537 43.3318 11.1631C40.6446 17.9456 37.9371 9.48613 29.3057 9.5C26.5022 9.50451 22.9973 11.321 21.1539 13.5734Z'
                            fill='#090A0B'
                        />
                    </g>
                    <circle
                        cx='77.755'
                        cy='53.5'
                        r='41.5'
                        fill='var(--center-channel-bg)'
                    />
                    <circle
                        cx='77.5'
                        cy='53.5'
                        r='38.5'
                        fill='var(--center-channel-color)'
                        fillOpacity='0.16'
                    />
                    <mask
                        id='mask2_4220_135496'
                        mask-type='luminance'
                        maskUnits='userSpaceOnUse'
                        x='39'
                        y='15'
                        width='78'
                        height='77'
                    >
                        <path
                            d='M39.0959 53.5C39.0959 74.7639 56.3841 92 77.7082 92C89.7995 92 100.594 86.4595 107.672 77.784C113.08 71.1584 116.32 62.7074 116.32 53.5C116.32 32.2361 99.0322 15 77.7082 15C56.3841 15 39.0959 32.2361 39.0959 53.5Z'
                            fill='white'
                        />
                    </mask>
                    <g mask='url(#mask2_4220_135496)'>
                        <path
                            d='M53.4924 74.5C57.4891 71.6636 71.4779 68.9848 77.9727 68C83.9678 69.1818 97.6568 72.3727 104.451 75.6818C111.246 78.9909 112.278 89.2727 111.945 94H44C44 81 48.4964 78.0455 53.4924 74.5Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M53.4924 74.5C57.4891 71.6636 71.4779 68.9848 77.9727 68C83.9678 69.1818 97.6568 72.3727 104.451 75.6818C111.246 78.9909 112.278 89.2727 111.945 94H44C44 81 48.4964 78.0455 53.4924 74.5Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.8'
                        />
                        <path
                            d='M87 70L84.178 61H71.7909L69.5 70C74.5 72.5 82 72.5 87 70Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M87 70L84.178 61H71.7909L69.5 70C74.5 72.5 82 72.5 87 70Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M94.5388 44.2988C96.1877 43.8589 96.2628 46.2836 95.6382 48.7991C95.0671 51.0914 94.5388 54.8372 92.823 53.9279C90.7557 59.3254 86.9853 63.4294 82.4249 65.0543C81.0089 65.6655 79.504 66 77.9441 66C75.9357 66 74.0187 65.4456 72.2648 64.4599C68.3268 62.5431 65.1039 58.7266 63.2578 53.8698C61.5642 54.2883 60.8459 50.3287 60.4648 48.7991C59.9807 46.8559 59.3656 44.2986 61.5642 44.2986C61.6095 32.5256 68.9737 23 78.0515 23C87.1293 23 94.4936 32.5258 94.5388 44.2988Z'
                            fill='var(--center-channel-bg)'
                        />
                        <path
                            d='M94.5388 44.2988C96.1877 43.8589 96.2628 46.2836 95.6382 48.7991C95.0671 51.0914 94.5388 54.8372 92.823 53.9279C90.7557 59.3254 86.9853 63.4294 82.4249 65.0543C81.0089 65.6655 79.504 66 77.9441 66C75.9357 66 74.0187 65.4456 72.2648 64.4599C68.3268 62.5431 65.1039 58.7266 63.2578 53.8698C61.5642 54.2883 60.8459 50.3287 60.4648 48.7991C59.9807 46.8559 59.3656 44.2986 61.5642 44.2986C61.6095 32.5256 68.9737 23 78.0515 23C87.1293 23 94.4936 32.5258 94.5388 44.2988Z'
                            fill='var(--center-channel-color)'
                            fillOpacity='0.56'
                        />
                        <path
                            d='M63.9741 26.383C66.1398 23.3965 67.6892 22.887 68.4475 22.6376C68.7033 22.5535 68.8691 22.499 68.9381 22.389C71.9166 17.6451 84.6741 18.5261 88.1041 21.1133C95.9084 27 93.9865 31.0627 94.8689 35.9071C95.3263 38.3922 94.4557 41.4418 94.2549 44C94.009 42.3029 92.6057 37.0742 92.5 36.5C91.2633 33.5 85.8429 37.1501 83 37C76.6134 36.6628 71.8302 35.5414 68.4475 31.5C67.4347 35.0839 64.3273 39.4355 62.3974 39.8437L61.9885 43.4729C60.8273 37.0332 59.9081 31.9903 63.9741 26.383Z'
                            fill='#090A0B'
                        />
                    </g>
                    <path
                        d='M125.564 0.427827C131.766 0.388622 137.468 1.9948 142.661 5.24635C144.794 6.58128 146.84 8.19355 148.801 10.0832C151.224 12.599 153.188 15.2733 154.691 18.1072M157.353 24.9709C158.029 27.6067 158.368 30.36 158.368 33.2316C158.363 36.7044 157.866 40.0073 156.876 43.1395M156.178 21.3371C156.4 21.9007 156.605 22.47 156.793 23.0452'
                        stroke='var(--center-channel-color)'
                        strokeOpacity='0.48'
                    />
                    <path
                        d='M114.044 79.5469C109.381 86.3471 103.302 91.3528 95.8113 94.5552C92.7362 95.87 89.4233 96.8809 85.8731 97.5872C81.288 98.3236 76.8785 98.4385 72.6441 97.9295M63.1318 95.6274C59.7416 94.3653 56.4792 92.6456 53.3445 90.4668C49.5568 87.827 46.3284 84.7784 43.6606 81.3206M67.9899 97.102C67.2067 96.9162 66.4298 96.7077 65.6594 96.4764'
                        stroke='var(--center-channel-color)'
                        strokeOpacity='0.48'
                    />
                    <path
                        d='M33.795 65.2666C26.553 65.2117 19.999 63.0477 14.1516 58.7556C12.9264 57.8563 11.7322 56.8635 10.5691 55.7772C7.54909 52.5373 5.24489 49.0918 3.65419 45.4384M0.991235 32.4628C0.996736 28.1336 1.79021 24.0342 3.37166 20.1646C4.9698 16.2542 7.37265 12.5784 10.5802 9.13739'
                        stroke='var(--center-channel-color)'
                        strokeOpacity='0.48'
                    />
                </g>
                <defs>
                    <clipPath id='clip0_4220_135496'>
                        <rect
                            width='159'
                            height='99'
                            fill='var(--center-channel-bg)'
                            transform='translate(0.255005)'
                        />
                    </clipPath>
                </defs>
            </svg>
        </span>
    );
}
